<template>
  <div class="Book" :style="style">
    <slot></slot>
  </div>
</template>

<script lang="ts">
import {PropType} from "vue/types/options";

export default {
  name: "Book",
  props: {
    doublePage: {
      type: Boolean as PropType<boolean>,
      default: false,
    },
    width: {
      type: String as PropType<string>,
    },
    height: {
      type: String as PropType<string>,
      default: '600px',
    },
    showPage: {
      type: Number as PropType<number>,
      default: 1,
    }
  },
  emits: ['getMaxPageNumber'],
  data() {
    return {
      children: []
    }
  },
  computed: {
    style() {
      let width = this.width
      if(this.doublePage) {
        width = '800px'
      } else {
        width = '400px'
      }
      return {
        width,
        height: this.height,
      }
    },
  },
  mounted() {
    this.getChildren()
  },
  methods: {
    getChildren() {
      this.children=this.$children.filter(i=>i.$options.name === 'BookItem')
      this.$emit('getMaxPageNumber',this.children.length)
    },
  }
}
</script>

<style lang="scss" scoped>
.Book{
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>
